/* enum */
import { BaseSelectUserComponentNameEnum } from '@src/component/common/BaseSelectUser/model'
/* scss */
import '@src/component/common/BaseSelectUser/components/BackButton/index.scss'
/* vue */
// @ts-ignore
import { ComponentInstance, ComponentRenderProxy, defineComponent, PropType } from 'vue'
import { CommonComponentInstance } from '@model/VC'
import { CreateElement } from 'vue'

import { t } from '@src/locales'

export type BackButtonProps = {
  // 返回按钮文字
  text: string;
}

export interface BackButtonSetupState {
  
}

export enum BackButtonEmitEventNameEnum {
  Input = 'input',
  Back = 'back'
}

export type BackButtonInstance = ComponentInstance & BackButtonSetupState
export type BackButtonVM = ComponentRenderProxy<BackButtonProps> & CommonComponentInstance & BackButtonInstance

export default defineComponent({
  name: BaseSelectUserComponentNameEnum.BaseSelectUserBackButton,
  emits: [
    BackButtonEmitEventNameEnum.Input,
    BackButtonEmitEventNameEnum.Back
  ],
  props: {
    // 返回按钮文字
    text: {
      type: String as PropType<string>,
      default: t('common.base.back')
    }
  },
  setup(props: BackButtonProps, { emit }) {
    
    const onClickBackHandler = () => {
      emit(BackButtonEmitEventNameEnum.Back)
    }
    
    return {
      onClickBackHandler
    }
  },
  render(h: CreateElement) {
    return (
      <div 
        class={BaseSelectUserComponentNameEnum.BaseSelectUserBackButton}
        onClick={this.onClickBackHandler}
      >
        
        {/* start 返回按钮 icon */}
        <i class="iconfont icon-arrow-left"></i>
        {/* end 返回按钮 icon */}
        
        {/* start 返回按钮文本 */}
        <span class="base-select-user-back-button__text">
          { this.text }
        </span>
        {/* end 返回按钮文本 */}
        
      </div>
    )
  }
})
